<template>
	<div>
    <div v-if="!showSearchPanel" class="home" >
      <Header cname="header"
              @onSearch="onSearch" 
              @onMenu="onMenu"/>
      <!-- end Header -->
      <TabPanel />
      <!-- end TabPanel  -->
      <Banner cname="banner"
              :headerBanner="headerBanner"/>
      <!-- end Banner -->
      <Themex v-if="themes" 
              :theme="themes[0]" 
              :count="3"/>
      <!-- end Themex -->
      <Themex v-if="themes"
              :theme="themes[1]" 
              :count="6"/>
      <!-- end Themex -->
      <Theme v-if="themes" 
              :hasmore=false
              cname="theme-padding" 
              :theme="themes[2]"/>
      <!-- end Theme -->
      <Theme v-if="themes" 
             :hasmore=false
             cname="theme-padding" 
             :theme="themes[3]"/>
      <!-- end Theme -->
      <Theme v-if="themes" 
              :hasmore=false
              cname="theme-padding" 
              :theme="themes[4]"/>
      <!-- end themes -->
    </div>

    <!-- 搜索页面 -->
    <div v-else>
      <SearchPanel />
    </div>
  </div>
</template>

<script>
import {Mixin} from '../../utils/mixin.js'
import {getBanners, getThemes} from '../../api/store.js'
import Banner from '../../components/home/Banner.vue'
import Theme from '../../components/common/Theme.vue'
import Themex from '../../components/common/Themex.vue'
import Header from '../../components/common/Header.vue'
import TabPanel from '../../components/common/TabPanel.vue'
import SearchPanel from '../../components/common/SearchPanel.vue'

export default {
  mixins: [Mixin],
	components: {
		Themex,
		Theme,
		Header,
		TabPanel,
		Banner,
    SearchPanel
	},
	data() {
		return {
			banners: null,
      themes: null,
      headerBanner: null,
		}
	},
	created() {
		this.initLoadData()
	},
	methods: {
		// 加载数据
		initLoadData() {
			getBanners().then(res=>{
        this.headerBanner = res.banners[0].items
			})
			getThemes().then(res=>{
				this.themes = res.themes
				console.log(this.themes)
			})
		}
	}
}
</script>
<style lang="scss">
@import '../../assets/style/color.scss';
.header {
  background-color: $color-bg-f;
}
.banner {
	margin-top: 50px;
}
</style>